{% load static %} <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	  <title>NoteBoard</title>
	<!-- 新 Bootstrap4 核心 CSS 文件 --> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> 
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> 
	<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
	<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> 
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 
	<!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> 
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- include summernote css/js -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script> -->
    <!-- <script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script> -->

    <!-- vue v2.* -->
    <!-- <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> -->

    <link href="{% static 't1.css' %}" rel="stylesheet">

<script type="text/javascript">
    $(function(){
        var h01 = $(window).height();
        var h01 = h01 - 30;
        $("#editor").height(h01);
        $(".data_list textarea").mouseover(function(){
            $("#editor").val($(this).val());
            $(this).focus();
        });
    })

    <!-- function Paste(a) { -->
    <!--     navigator.clipboard.readText().then(clipText => document.getElementById("data").innerText = clipText); -->
    <!-- } -->
    <!-- document.querySelector("#data").addEventListener("click", Paste); -->

    function Clear(a) {
        var textArea = document.getElementById("data");
        textArea.value="";
    }     

    function Copy(a) {
        var content = document.getElementById(a.name);
        content.select();
        document.execCommand('Copy');
    }
    
    function Fresh(a) {
         parent.location.reload();
    }
</script>
</head>
<!-- <body class='container-fluid d-flex w-75 justify-content-center'> -->
<body>
<div id='overall' class='my-1 d-flex justify-content-center'>

    <div class='w-50'>
        
        <div class='mt-2 w-100'>
            <form method='post' id='upload' action=''>
                {% csrf_token %}
                <div class='form-group mx-1'>
                    <textarea class='form-control' id='data' rows='10' name='new-text' form='upload'></textarea>
                    <!-- <textarea class='form-control' id='exampleFormControlTextarea2' id='data' rows='10' name='new-text' form='upload'></textarea> -->
                </div>
                <div>
                    <button class='btn btn-danger btn-sm' type="button"   onclick="Clear(this)">Clear</button>
                    <!-- <button class='btn btn-primary btn-sm' onclick="Paste(this)">Paste</button> -->
                    <button class='mx-20 btn btn-info btn-sm' type="submit">submit</button>
                    <button class='btn btn-success btn-sm' type='button' onclick="Fresh(this)">
                        <a class='text-light' href="/noteboard">fresh</a>
                    </button>
                </div>
            </form>
        </div>

        {% for i in data %}
        <div class='my-1 p-0 d-flex align-middle'>
            <div class='my-1' style='width:60px;'>
                <div class='rounded bg-info small text-center'>
                    <div class='w-100'>{{ i.date|date:"m-d" }}</div>
                    <div class='w-100'>{{ i.date|date:"H:i:s" }}</div>
                </div>
                <div><button class=' my-1 btn btn-success btn-sm w-100' name="data{{ forloop.counter }}" onclick="Copy(this)">copy</button></div>
                <div>
                    <form method='post' id='remove' action=''>
                        {% csrf_token %}
                        <input type="hidden" value="{{ i.id }}" name="del"></input>
                        <input class='btn btn-danger btn-sm w-100' type="submit" value="del"></input>
                    </form>
                </div>
            </div>
            <div class='w-100 mx-1 mt-2  data_list form-group'>
                <textarea readonly="readonly" id="data{{ forloop.counter }}" style="overflow:hidden;" class='form-control w-100 h-100'>{{ i.body }}</textarea>
            </div>
        </div>
        {% endfor %}

        <div class="pagination">
            <span class="page-links">
                {% if page_obj.has_previous %}
                    <a href="?page={{ page_obj.previous_page_number }}">previous</a>
                {% endif %}
                    <span class="page-current">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                    </span>
                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}">next</a>
                {% endif %}
            </span>
        </div>
    </div>

    <div class='container rounded w-50 sticky-top vh-100' style='margin-top:10px; padding: 3px;'>
        <textarea id='editor' class='form-control preview bg-light w-100 ' >
    </div>
</div>
</body>
</html>
